// 商家详情空状态
<template>
	<div id="detail">
		<div class="top">
			<div class="top_div">
				<img src="../assets/address/step.jpg" />

				<input type="text" placeholder="请输入商品名称搜索" />
			</div>

			<div class="fujin">
				<div v-for="itme in datalist_dianpu">
					<div class="dianpu" v-for="it in itme.shops">
						<div class="dianpu_logo">
							<img :src="it.imgs" />
						</div>

						<div class="dianpu_jianjie">
							<p>{{ it.text1 }}</p>

							<div class="jianjie_div" v-for="aa in it.jianjie">
								<span>{{ aa.sp1 }}</span>

								<span>{{ aa.sp2 }}</span>

								<span>{{ aa.sp3 }}</span>
							</div>

							<p class="vip_p">{{ it.vipyouhui }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="all_shops">
			<div class="biaoti">
				<p v-for="item in biaoti">{{ item }}</p>
			</div>

			<div class="dianpu_shop">
				<div class="dian-one" v-for="(item, i) in data_shops">
					<div class="img-dian">
						<img :src="item.logoimgs" />
					</div>

					<div class="shop-detail">
						<p>{{ item.jiatext }}</p>

						<p>{{ item.yueshao }}</p>

						<div class="jiage">
							<span>{{ item.xianjia }}</span><span>{{ item.yuanjia }}</span><span
								class="num">{{ item.yishao }}</span><img :src="item.jia" class="jia-img" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="bottom_div">
			<div class="jiesuan">
				<img src="../assets/login/basket@2x.png" />

				<span>购物车是空的</span><span></span>

				<button>去结算</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				datalist_dianpu: [{
					shops: [{
						imgs: require("../assets/orders/icon_order.png"),

						text1: "沃尔玛",

						jianjie: [{
							sp1: "月售1万+",

							sp2: "起送¥0",

							sp3: "基础运费¥5",
						}, ],

						vipyouhui: "VIP尊享满89元减4元运费券（每月3张）",
					}, ],
				}, ],

				biaoti: [
					"全部商品",
					"秒杀",
					"新鲜水果",
					"休闲食品",
					"时令蔬菜",
					"肉蛋家禽",
				],

				data_shops: [{
						logoimgs: require("../assets/orders/icon_order.png"),

						jiatext: "番茄250g/份",

						yueshao: "月售10件",

						xianjia: "￥33.6",

						yuanjia: "￥55.6",

						yishao: "88",

						jia: require("../assets/Details/加.png"),
					},

					{
						logoimgs: require("../assets/orders/icon_order.png"),

						jiatext: "番茄250g/份",

						yueshao: "月售10件",

						xianjia: "￥33.6",

						yuanjia: "￥55.6",

						yishao: "88",

						jia: require("../assets/Details/加.png"),
					},

					{
						logoimgs: require("../assets/orders/icon_order.png"),

						jiatext: "番茄250g/份",

						yueshao: "月售10件",

						xianjia: "￥33.6",

						yuanjia: "￥55.6",

						yishao: "88",

						jia: require("../assets/Details/加.png"),
					},

					{
						logoimgs: require("../assets/orders/icon_order.png"),

						jiatext: "番茄250g/份",

						yueshao: "月售10件",

						xianjia: "￥33.6",

						yuanjia: "￥55.6",

						yishao: "88",

						jia: require("../assets/Details/加.png"),
					},
				],
			};
		},
	};
</script>



<style lang="less" scoped>
	/* 单独给页面设置背景色 */

	#detail {
		margin-bottom: 49px;
	}

	.top {
		background: white;
	}

	.top_div {
		padding-top: 36px;

		display: flex;

		padding-right: 18px;

		align-items: center;
	}

	.top_div img {
		width: 12.3px;

		height: 21.2px;

		padding-left: 18.5px;
	}

	.top_div input {
		flex: 1;

		border: none;

		height: 32px;

		background: #f5f5f5;

		border-radius: 16px;

		padding-left: 44px;

		margin-left: 16.2px;
	}

	.fujin {
		margin-top: 10px;

		background: white;

		padding-left: 18px;
	}

	.fujin .text {
		font-size: 18px;

		color: #333333;
	}

	.dianpu {
		display: flex;

		padding-top: 14px;
	}

	.dianpu_logo img {
		width: 56px;

		height: 56px;
	}

	.dianpu_jianjie {
		flex: 1;

		padding-left: 16px;
	}

	.dianpu_jianjie p {
		font-size: 16px;

		color: #333333;
	}

	.dianpu_jianjie div {
		padding-top: 8px;
	}

	.jianjie_div span {
		font-size: 13px;

		color: #333333;

		padding-right: 16px;
	}

	.fujin .vip_p {
		font-size: 13px;

		color: #e93b3b;

		padding-top: 8px;

		padding-bottom: 12px;
	}

	.all_shops {
		display: flex;

		padding-top: 10px;
	}

	.all_shops .biaoti {
		width: 76px;
	}

	.biaoti p {
		/* height: 40px; */

		font-size: 14px;

		color: #333333;

		line-height: 22px;

		text-align: center;

		/* padding-left: 10px; */

		background: #f5f5f5;

		border-radius: 2px;

		padding-top: 12px;

		padding-bottom: 12px;
	}

	.biaoti :nth-child(1) {
		background: #ffffff;
	}

	.dianpu_shop {
		flex: 1;
	}

	.dian-one {
		display: flex;

		padding-bottom: 12px;

		border-bottom: #f1f1f1c2 solid 1px;

		padding-top: 12px;
	}

	.dian-one .img-dian {
		padding-left: 16px;
	}

	.img-dian img {
		width: 68px;

		height: 68px;
	}

	.shop-detail {
		flex: 1;

		padding-left: 16px;
	}

	.shop-detail :nth-child(1) {
		font-size: 14px;

		color: #333333;
	}

	.shop-detail :nth-child(2) {
		font-size: 12px;

		color: #333333;

		line-height: 16px;

		padding-top: 6px;
	}

	.jiage {
		padding-top: 6px;

		display: flex;

		align-items: center;
	}

	.jiage img {
		width: 19.5px;

		height: 19.4px;
	}

	.jiage :nth-child(1) {
		font-size: 14px;

		color: #e93b3b;

		line-height: 20px;
	}

	.jiage :nth-child(2) {
		font-size: 10px;

		color: #999999;

		line-height: 20px;

		padding-left: 10px;

		text-decoration: line-through;

		flex: 2;
	}

	.num {
		font-size: 14px;

		color: #333333;

		line-height: 16px;

		padding-left: 11px;

		padding-right: 11px;
	}

	.jia-img {
		padding-right: 18px;
	}

	.bottom_div {
		position: fixed;

		bottom: 0px;
	}

	.bottom_div .jiesuan {
		display: flex;

		align-items: center;

		padding-left: 24px;

		height: 49px;
	}

	.jiesuan img {
		width: 28px;

		height: 26px;
	}

	.jiesuan :nth-child(2) {
		font-size: 12px;

		color: #333333;

		padding-left: 30px;
	}

	// .jiesuan :nth-child(3) {

	//   font-size: 18px;

	//   color: #e93b3b;

	// }

	.jiesuan button {
		background: #4fb0f9;

		height: 49px;

		width: 98px;

		margin-right: 0px;

		margin-left: 120px;

		border: none;

		font-size: 14px;

		color: #ffffff;
	}
</style>
